<!DOCTYPE html>
<html>

<head>
  <title>忘记密码</title>
  <style>
    /* 样式和注册页面类似，直接复制上面的style部分 */
  </style>
</head>

<body>
  <h2>忘记密码</h2>
  <div id="step1" style="display: block;"> <!-- 第一步：输入用户名 -->
    <form id="getQuestionForm">
      <div class="form-group">
        <label>用户名：</label>
        <input type="text" id="forgotUsername" required>
        <span class="error" id="forgotUsernameError">用户名不能为空</span>
      </div>
      <button type="submit">获取密保问题</button>
      <div id="forgotMessage"></div>
    </form>
  </div>

  <div id="step2" style="display: none;"> <!-- 第二步：显示密保问题，输入答案和新密码 -->
    <form id="resetForm">
      <input type="hidden" id="resetUsername"> <!-- 隐藏用户名 -->
      <div class="form-group">
        <label>密保问题：</label>
        <p id="securityQuestionDisplay"></p> <!-- 显示问题 -->
      </div>
      <div class="form-group">
        <label>密保答案：</label>
        <input type="text" id="resetSecurityAnswer" required>
        <span class="error" id="resetSecurityAnswerError">密保答案不能为空</span>
      </div>
      <div class="form-group">
        <label>新密码：</label>
        <input type="password" id="resetNewPassword" required>
        <span class="error" id="resetNewPasswordError">密码需6-12位，不能有空格</span>
      </div>
      <button type="submit">重置密码</button>
      <div id="resetMessage"></div>
    </form>
  </div>

  <script>
    // 第一步：获取密保问题
    document.getElementById('getQuestionForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('forgotUsername').value.trim();
      if (!username) {
        document.getElementById('forgotUsernameError').style.display = 'block';
        return;
      }

      try {
        const response = await fetch('http://127.0.0.1:3007/api/get-question', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ username }),
        });

        const data = await response.json();
        if (data.status !== 0) {
          document.getElementById('forgotMessage').style.color = 'red';
          document.getElementById('forgotMessage').textContent = data.message;
          return;
        }

        // 显示第二步，隐藏第一步
        document.getElementById('step1').style.display = 'none';
        document.getElementById('step2').style.display = 'block';
        document.getElementById('resetUsername').value = username;
        document.getElementById('securityQuestionDisplay').textContent = data.data.securityQuestion;
      } catch (error) {
        document.getElementById('forgotMessage').style.color = 'red';
        document.getElementById('forgotMessage').textContent = '网络请求失败，请重试';
      }
    });

    // 第二步：重置密码
    document.getElementById('resetForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('resetUsername').value;
      const securityAnswer = document.getElementById('resetSecurityAnswer').value.trim();
      const newPassword = document.getElementById('resetNewPassword').value.trim();

      // 简单验证
      const errors = {
        securityAnswer: securityAnswer.length < 1 || securityAnswer.length > 100,
        newPassword: newPassword.length < 6 || newPassword.length > 12 || /\s/.test(newPassword),
      };

      Object.keys(errors).forEach(key => {
        document.getElementById(`reset${key}Error`).style.display = errors[key] ? 'block' : 'none';
      });

      if (Object.values(errors).some(e => e)) return;

      try {
        const response = await fetch('http://127.0.0.1:3007/api/reset', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ username, securityAnswer, newPassword }),
        });

        const data = await response.json();
        document.getElementById('resetMessage').style.color = data.status === 0 ? 'green' : 'red';
        document.getElementById('resetMessage').textContent = data.message;

        if (data.status === 0) {
          // 重置成功，跳回登录页
          setTimeout(() => window.location.href = 'login.html', 1000);
        }
      } catch (error) {
        document.getElementById('resetMessage').style.color = 'red';
        document.getElementById('resetMessage').textContent = '网络请求失败，请重试';
      }
    });
  </script>
</body>

</html>